<template>
  <view class="login-container">
    <view class="login-content">
      <view class="header">
        <text class="title-cn">欢迎登录</text>
        <text class="title-en">WELCOME BACK</text>
      </view>

      <view class="form-group">
        <input 
          class="input-field" 
          type="text" 
          v-model="username" 
          placeholder="请输入账号" 
          placeholder-class="placeholder"
        />
      </view>
      <view class="form-group">
        <input 
          class="input-field" 
          type="password" 
          v-model="password" 
          placeholder="请输入密码" 
          placeholder-class="placeholder"
        />
      </view>

      <button class="login-btn" @click="handleLogin">
        登录
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request'; // 假设您有统一的请求封装

const username = ref('');
const password = ref('');

// 页面配置
defineOptions({
  disableScroll: true
});

const handleLogin = async () => {
  if (!username.value || !password.value) {
    uni.showToast({
      title: '账号或密码不能为空',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  // 模拟登录请求
  uni.showLoading({
    title: '登录中...'
  });

  try {
    // 实际项目中这里会调用API
    const response = await request({
      url: '/api/User/login',
      method: 'POST',
      data: {
        userName: username.value,
        password: password.value,
        verificationCode: '======', // 占位符，根据实际情况获取
        uuid: '===' // 占位符，根据实际情况获取
      }
    });

    // 假设登录成功
    if (response.status) { // 根据API返回的status字段判断
      uni.hideLoading();
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 1500
      });
      // 保存登录状态到本地存储
      uni.setStorageSync('isLoggedIn', true);
      uni.setStorageSync('token', response.data.token); // 存储token
      uni.setStorageSync('username', response.data.userName); // 存储后端返回的userName
      // 可选：存储用户头像
      if (response.data.img) {
        uni.setStorageSync('userAvatar', response.data.img);
      }

      // 返回上一页 (个人中心页)
      uni.navigateBack({
        delta: 1
      });
    } else {
      uni.hideLoading();
      uni.showToast({
        title: response.message || '登录失败',
        icon: 'error',
        duration: 2000
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error('Login error:', error);
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'error',
      duration: 2000
    });
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.login-content {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.header {
  text-align: center;
  margin-bottom: 40px;

  .title-cn {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
    font-family: 'STKaiti', '华文楷体', serif;
  }

  .title-en {
    display: block;
    font-size: 16px;
    color: #7f8c8d;
    letter-spacing: 3px;
    font-family: 'STLiuti', '华文隶书', serif;
  }
}

.form-group {
  margin-bottom: 25px;

  .input-field {
    width: 100%;
    height: 50px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0 20px;
    font-size: 16px;
    color: #2c3e50;
    transition: all 0.3s ease;
    box-sizing: border-box;

    &:focus {
      border-color: #007aff;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    }
  }

  .placeholder {
    color: #95a5a6;
  }
}

.login-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #007aff 0%, #0056b3 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);

  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
  }
}
</style> 